<@override name="content">
<div class="pagination pagination-centered">
  <div class="pull-left" id="problem-search">
    <form class="form-search" action="problem/search">
      <div class="input-append">
        <input type="hidden" name="scope" value="title">
        <input type="text" id="searchProblem" class="input-medium search-query" name="word" placeholder="Search or Goto" autofocus>
        <button type="submit" class="btn btn-info">Go</button>
      </div>
    </form>
  </div>
  <#include "../common/_paginate.html" />
  <@paginate currentPage=problemList.pageNumber totalPage=problemList.totalPage actionUrl="problem/" />
  <div class="pull-right">
    <span class="badge badge-info">${problemList.pageNumber}/${problemList.totalPage} Pages</span>
    <span class="badge badge-info">${problemList.totalRow} Problems</span>
  </div>
</div>

<table id="problem-list" class="table table-hover table-condensed">
  <thead>
  <tr>
    <th></th>
    <th>ID</th>
    <th>Title</th>
    <th>AC</th>
    <th>Submit</th>
    <th>Ratio</th>
    <th>Date</th>
  </tr>
  </thead>
  <tbody>
    <#if problemList??>
      <#list problemList.list as Problem>
      <tr>
        <td class="result" pid="${Problem.pid!}"></td>
        <td class="pid"><a href="problem/show/${Problem.pid!}">${Problem.pid!}</a></td>
        <td class="title"><a href="problem/show/${Problem.pid!}"><#if Problem.status==false>
        <del></#if>${Problem.title!}<#if Problem.status==false></del></#if>
        </a></td>
        <td class="accept"><a href="status/?pid=${Problem.pid!}&result=0">${Problem.accepted!}</a></td>
        <td class="submit"><a href="status/?pid=${Problem.pid!}">${Problem.submission!}</a></td>
        <td class="ratio"><#if (Problem.submission>0)>${(Problem.accepted/Problem.submission*100)?int}<#else>0</#if>%
        </td>
        <td class="ctime">${Problem.ctime_t!}</td>
      </tr>
      </#list>
    </#if>
  </tbody>
</table>

  <#if (problemList.list.size()>=pageSize/2)>
  <div class="pagination pagination-centered pagination-ul">
    <@paginate currentPage=problemList.pageNumber totalPage=problemList.totalPage actionUrl="problem/" />
  </div>
  </#if>
</@override>

<@override name="scripts">
  <#if oj_style != "slate">
  <link rel="stylesheet" href="assets/tablecloth/css/tablecloth.css" type="text/css">
  <script src="assets/tablecloth/js/jquery.metadata.js"></script>
  <script src="assets/tablecloth/js/jquery.tablesorter.min.js"></script>
  <script src="assets/tablecloth/js/jquery.tablecloth.js"></script>
  </#if>

<script type="text/javascript">
  $(document).ready(function () {
    var prevpage = "/problem/${problemList.pageNumber-1}<#if problemList.pageSize!=pageSize>-${problemList.pageSize}</#if>"
    var nextpage = "/problem/${problemList.pageNumber+1}<#if problemList.pageSize!=pageSize>-${problemList.pageSize}</#if>"
    $(document).keydown(function (event) {
        <#if (problemList.pageNumber>1)>if (event.keyCode == 37)window.location = prevpage;</#if>
        <#if problemList.pageNumber<problemList.totalPage>if (event.keyCode == 39)window.location = nextpage;</#if>
    });

    <#if oj_style != "slate">
      $("#problem-list").tablecloth({
        theme: "stats",
        condensed: true,
        sortable: true,
        striped: true,
        clean: true
      });
    </#if>

    <#if user??>
      $.getJSON('/api/problem/userResult', function (data) {
        if (data.userResult) {
          for (var i = 0; i < data.userResult.length; ++i) {
            var problem = data.userResult[i];
            if (problem.result != data.acType)
              $('.result[pid=' + problem.pid + ']').addClass('wa').html('<span class="label label-important">N</span>');
            else
              $('.result[pid=' + problem.pid + ']').addClass('ac').html('<span class="label label-success">Y</span>');
          }
        }
      });
    </#if>
  });
</script>
</@override>
<@extends name="../common/_layout.html" />
